<template>
<Theme>
<div slot="main">
<el-form ref="store" :model="store" label-width="80px">
    <el-form-item label="门店名称">
      <el-input v-model="store.storeName"></el-input>
    </el-form-item>
    <el-form-item label="营业地址">
      <el-input v-model="store.storeAddress"></el-input>
    </el-form-item>
    <el-form-item label="定位">
      <el-input v-model="store.storeLocation"></el-input>
    </el-form-item>
    <el-form-item label="法人">
      <el-input v-model="store.storeBoss"></el-input>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="store.storeTel"></el-input>
    </el-form-item>
    <el-form-item label="特色">
      <el-input v-model="store.storeFeature"></el-input>
    </el-form-item>
    <el-form-item label="佣金比例">
      <el-input v-model="store.storeProportion"></el-input>
    </el-form-item>
    <el-table :data="staffList" border style="width: 100%">
      <el-table-column prop="staffName" label="姓名"> </el-table-column>
      <el-table-column prop="staffLevel" label="职级"> </el-table-column>
      <el-table-column prop="staffTel" label="联系电话"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope2">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope2.$index, scope2.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row>
        <el-popover placement="top" width="400" trigger="click">
            <el-form ref="store" :model="staff" label-width="80px">
              <el-form-item label="名称">
                <el-input v-model="staff.staffName"></el-input>
              </el-form-item>
              <el-form-item label="职业等级">
                <el-input v-model="staff.staffLevel"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="staff.staffTel"></el-input>
              </el-form-item>
               <el-form-item>
                <el-button type="primary" @click="confirmStaff()">确定</el-button>
                <el-button>取消</el-button>
                </el-form-item>
            </el-form>
            <el-button
              slot="reference">添加店员</el-button
            >
          </el-popover>

    </el-row>
    <el-form-item>
      <el-button type="primary" @click="onSubmit()"
        >确定</el-button
      >
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</div>
<BreadNav slot="breadNav" />
</Theme>
</template>

<script>
import * as StoreService from "@/services/StoreService.js";
import * as StaffService from "@/services/StaffService.js";
import Theme from '@/components/Theme.vue'
import BreadNav from '@/components/BreadNav.vue'

 export default {
    components:{
      Theme,BreadNav
    },
    inject:['reload'],
    data(){
        return{
            staffList:[],
            store: {
                storeId:"",
                storeName: "",
                storeLicense: "",
                storeAddress: "",
                storeLocation: "",
                storeBoss: "",
                storeTel: "",
                storeFeature: "",
                storeProportion: "",
                storeLevel: "",
                storePic: "",
            },
            staff:{
                staffId:"",
                stafName:"",
                staffLevel:"",
                staffTel:"",

            }
        }
    },
    methods:{
        async onSubmit(){
            var resp = await StoreService.updateStore(this.store);
            // console.log(resp);
            if(resp==true){
                console.log("修改成功");
                this.$router.push({name:"Store"});
            }else{
                console.log("修改失败");
            }
        },
        async handleDelete(index,row){
            var resp = await StaffService.deleteStaff(row.staffId);
            if(resp==true){
                console.log("删除店员成功");
                this.reload();
            }else{
                console.log("删除失败....");
            }
        },
        async confirmStaff(){
            //添加店员的方法
            var resp = await StaffService.addStaff(this.$route.params.storeId,this.staff);
            console.log("====================");
            console.log(this.staff);

            console.log(resp);
            if(resp==true){
                console.log("添加店员成功");
                this.reload();
                // this.$router.push({
                //     name:"UpdateStore",
                //     params:{
                //         storeId:this.$route.params.storeId,
                //     }
                // })
            }else{
                console.log("添加失败");
            }
       }

    },
    async created(){
        //更具$route.params.storeId得到store的值 
        console.log("门店的id是：");
        console.log(this.$route.params.storeId );
        var resp1= await StoreService.getStoreById(this.$route.params.storeId);
        this.store =resp1;
        var resp2 = await StaffService.getStaffList(this.$route.params.storeId);
        this.staffList =resp2;
    }

};
</script>

<style>
</style>